<template>
  <div class="header">
    <!-- 消息提示，没有写弹出菜单 -->
    <el-badge class="info" :is-dot="info > 0">
      <el-button size="small" icon="Bell" circle ></el-button>
    </el-badge>

    <!-- 头像 -->
    <el-avatar icon="UserFilled" />

    <!-- 下拉菜单 -->
    <el-dropdown @command="handleCommand">
      <span class="el-dropdown-link">
        欢迎您，{{ username }}
        <el-icon class="el-icon--right">
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon='User' command="user">个人信息</el-dropdown-item>
          <el-dropdown-item icon="SwitchButton" command="layout">退出登录</el-dropdown-item>

        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/auth';
import { useRouter } from 'vue-router';
//消息提示数目
const infodata = Math.round(Math.random())
const info = ref(infodata)

//  获取用户信息
const userStore = useUserStore();
const { username } = storeToRefs(userStore);

//下拉菜单
const router = useRouter();
const handleCommand = (command: string) => {
  if (command === 'user') {
    router.push('/personal')
  } else if (command === 'layout') {
    userStore.logout()
    router.push('/login')
  }
}



</script>


<style scoped lang="less">
.header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 60px;
  padding: 0 20px;
  background-color: white;
.info{
  margin-right: 20px;
}
.el-avatar{
  margin-right: 20px;
}
}
</style>